<template>
	<view id="app">
		<router-view />
	</view>
</template>

<script>
	export default {
		name: 'App',
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/* 全局样式 */
	page {
		background-color: #f5f5f5;
	}
	
	#app {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	
	/* PDA适配样式 */
	.container {
		max-width: 720px;
		margin: 0 auto;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	/* 通用按钮样式 */
	.btn {
		border-radius: 8rpx;
		font-size: 28rpx;
		transition: all 0.3s ease;
		
		&:active {
			transform: scale(0.95);
		}
	}
	
	/* 通用卡片样式 */
	.card {
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}
	
	/* 通用输入框样式 */
	.input {
		border: 2rpx solid #e4e7ed;
		border-radius: 8rpx;
		padding: 20rpx;
		font-size: 28rpx;
		background: #fff;
		
		&:focus {
			border-color: #409EFF;
		}
	}
	
	/* 通用文本样式 */
	.text-primary {
		color: #409EFF;
	}
	
	.text-success {
		color: #67C23A;
	}
	
	.text-warning {
		color: #E6A23C;
	}
	
	.text-danger {
		color: #F56C6C;
	}
	
	.text-info {
		color: #909399;
	}
	
	/* 通用间距 */
	.mt-10 { margin-top: 10rpx; }
	.mt-20 { margin-top: 20rpx; }
	.mt-30 { margin-top: 30rpx; }
	.mb-10 { margin-bottom: 10rpx; }
	.mb-20 { margin-bottom: 20rpx; }
	.mb-30 { margin-bottom: 30rpx; }
	.ml-10 { margin-left: 10rpx; }
	.ml-20 { margin-left: 20rpx; }
	.mr-10 { margin-right: 10rpx; }
	.mr-20 { margin-right: 20rpx; }
	.p-10 { padding: 10rpx; }
	.p-20 { padding: 20rpx; }
	.p-30 { padding: 30rpx; }
</style>